<template>
  <div class="ind-post-form-display">
    <div v-if="fromShareField && formIdx === 0" class="other-check-field" :class="{ 'has-post-form': formDisplay.length > 0 }">
      <span class="label">{{ fromShareField.title }}：</span>
      <span v-if="fromShareField.config.shareMax" class="value">{{ fromShareField.content }} 项</span>
      <span v-else class="value">{{ (fromShareField.content === '0' && '否') || '是' }}</span>
    </div>
    <div v-for="field in formDisplay" :key="field.id" class="field-item">
      <span class="label" :style="{ width: labelWidth }">{{ field.title }}：</span>
      <span class="value" v-if="field.config && field.config.type === FIELD_TYPE.file">
        <div class="file-container" v-if="field.fileShowList.length">
          <div class="file-title">已上传附件：{{ field.fileShowList.length }}个</div>
          <div class="file-list">
            <div class="invalid-tips" v-if="validKeywords && field.invalid > 0">材料中需包含关键字：{{ validKeywords }}</div>
            <upload-preview :file-list="field.fileShowList" layout="list"></upload-preview>
          </div>
        </div>
        <div v-else class="file-empty">-</div>
      </span>
      <span class="value" v-else-if="field.config && field.config.type === FIELD_TYPE.rate">
        {{ field.content | orgRateDisplay }}
      </span>
      <span class="value" v-else-if="field.config && field.config.type === FIELD_TYPE.slider">
        <el-progress :percentage="field.content"></el-progress>
      </span>
      <span class="value" v-else-if="field.config && field.config.type === FIELD_TYPE.fromShareInner">
        {{ (field.content === '1' && '是') || '否' }}
      </span>
      <span class="value" v-else>{{ field.content || '-' }}</span>
    </div>
  </div>
</template>

<script>
import { IND_POST_TYPE } from '@utility/dict'
// import UploadPreview from './UploadPreviewPoints.vue'
import UploadPreview from '@com/UploadPreview/index.vue'
export default {
  name: 'PostFormDisplay',
  components: { UploadPreview },
  props: {
    formData: {
      type: Array,
    },
    validKeywords: {
      type: String,
    },
    labelMinWidth: {
      type: Number,
    },
    formIdx: {
      type: Number,
    },
  },
  data() {
    return {
      FIELD_TYPE: IND_POST_TYPE._define,
    }
  },
  filters: {
    orgRateDisplay(val) {
      switch (val) {
        case 0:
          return '满意'
        case 1:
          return '基本满意'
        case 2:
          return '不满意'
      }
      return '-'
    },
  },
  computed: {
    labelWidth() {
      if (this.formDisplay && this.formDisplay.length) {
        let maxlength = 0
        this.formDisplay.forEach(item => {
          if (item.title.length > maxlength) {
            maxlength = item.title.length
          }
        })
        let labelWidth = Math.ceil(maxlength * 18.5) + 10
        if (labelWidth < 100) {
          labelWidth = 100
        }
        if (this.labelMinWidth && labelWidth < this.labelMinWidth) {
          labelWidth = this.labelMinWidth
        }
        this.$emit('label-width', labelWidth)
        return labelWidth + 'px'
      }
      return '80px'
    },
    formDisplay() {
      if (this.formData) {
        // 转换类型
        const isFromShare = this.fromShareField && this.fromShareField.content > 0
        return this.formData
          .filter(item => {
            if (item.config.type !== IND_POST_TYPE.fromShare) {
              if (isFromShare) {
                return item.content !== ''
              } else {
                return true
              }
            }
            return false
          })
          .map(item => {
            let content = item.content
            if (item.config && [IND_POST_TYPE.rate, IND_POST_TYPE.slider].includes(item.config.type)) {
              if (content) {
                content = content - 0
              } else {
                content = 0
              }
            }
            return { ...item, content: content }
          })
      }
      return []
    },
    fromShareField() {
      return this.formData.find(item => item.config.type === IND_POST_TYPE.fromShare)
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.ind-post-form-display {
  &:not(:first-child) {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #ddd;
  }
  .other-check-field {
    overflow: hidden;
    line-height: 2;
    font-size: 16px;

    &.has-post-form {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px dashed #bbb;
    }
    .label {
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }
    .value {
      flex: 1;
      font-size: 16px;
      white-space: pre-wrap;
      color: #666;
      margin-left: 20px;
    }
  }
  .field-item {
    display: flex;
    overflow: hidden;
    &:not(:last-child) {
      margin-bottom: 10px;
    }

    line-height: 26px;
    .label {
      font-size: 16px;
      width: 160px;
      color: #333;
      font-weight: bold;
    }
    .value {
      flex: 1;
      font-size: 16px;
      white-space: pre-wrap;
      color: #666;
      margin-left: 20px;

      .file-container {
        border: 1px solid #ddd;
        .file-title {
          background: #f5f5f5;
          padding: 2px 10px;
        }
        .file-list {
          padding: 5px 10px;
          .invalid-tips {
            margin: 5px 0;
            background-color: #fdf6ec;
            border-color: #faecd8;
            color: #e6a23c;
            padding: 2px 10px;
            border-radius: 2px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
